<template>
  <div class="hello">
   <ve-bar :data="chartData1" :settings="chartSettings" :extend="chartExtend1">
    </ve-bar>
 
  </div>
</template>

<script>
export default {
  data() {
    this.chartSettings = {
      stack: {
        xxx: ["地区", "告警信息", "违规信息", "红头信息", "涉密信息"],
      },
      offsetY: 100,
    };
    this.chartExtend1 = {
      grid: {
        //修改布局
        bottom: "20%", //组件离容器底部部的距离
      },
      "xAxis.0.axisLabel.color": "white", //x轴文本颜色
      "yAxis.0.axisLabel.color": "white", //y轴文本改变颜色
      legend: {
        textStyle: {
          color: "white",
          fontSize: 15,
        },
        top: 10,
      },
      top: 20,
    };

   
    return {
      chartData1: {
        //区县
        columns: ["地区", "告警信息", "违规信息", "红头信息", "涉密信息"],
        rows: [
          {
            地区: "1/1",
            告警信息: 1393,
            违规信息: 1093,
            红头信息: 1200,
            涉密信息: 5000,
          },
          {
            地区: "1/2",
            告警信息: 3530,
            违规信息: 3230,
            红头信息: 1500,
            涉密信息: 2500,
          },
          {
            地区: "1/3",
            告警信息: 2923,
            违规信息: 2623,
            红头信息: 2000,
            涉密信息: 1000,
          },
          {
            地区: "1/4",
            告警信息: 1723,
            违规信息: 1423,
            红头信息: 2500,
            涉密信息: 3500,
          },
        ],
      },
     
    };
  },
  methods: {},
  mounted() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
body {
  background: #000;
}
</style>
